<template>
  <component
    :is="all[type]"
    v-show="isShow(properties)"
    :id="id"
    ref="item"
    :drag-group-name="dragGroupName"
    :item-choose="itemChoose"
    :attrs="attrs"
    :extend-attrs="extendAttrs"
    :properties="properties"
    :form="form"
    :children="children"
    :type="type"
    :select-id="selectId"
    :drag-class="dragClass"
    :check-class="checkClass"
    :class="selectId == id ? checkClass : ''"
    :logic-control="logicControl"
    @itemSelect="
      (v) => {
        $emit('select', v)
      }
    "
    @itemRemove="
      (v) => {
        $emit('remove', v)
      }
    "
  />
</template>
<script>
import DragFormItem from './DragFormItem.vue'
import BaseDragItem from './BaseDragItem.js'
import DividerItem from './DividerItem.vue'
import CardItem from './CardItem.vue'
import TabItem from './TabItem.vue'
import DragTool from './DragTool.vue'
import { shallowRef, render, h } from 'vue'
export default {
  name: 'Item',
  components: { DragTool },
  extends: BaseDragItem,
  props: {
    isForm: Boolean,
    selectId: String
  },
  emits: ['select', 'remove'],
  data() {
    return {
      dragTool: null,
      all: {
        select: shallowRef(DragFormItem),
        input: shallowRef(DragFormItem),
        radio: shallowRef(DragFormItem),
        checkbox: shallowRef(DragFormItem),
        inputNumber: shallowRef(DragFormItem),
        switch: shallowRef(DragFormItem),
        selectTree: shallowRef(DragFormItem),
        datetime: shallowRef(DragFormItem),
        img: shallowRef(DragFormItem),
        file: shallowRef(DragFormItem),
        divider: shallowRef(DividerItem),
        textarea: shallowRef(DragFormItem),
        province: shallowRef(DragFormItem),
        slider: shallowRef(DragFormItem),
        card: shallowRef(CardItem),
        tab: shallowRef(TabItem),
        cascader: shallowRef(DragFormItem),
        iconSelect: shallowRef(DragFormItem),
        rate: shallowRef(DragFormItem),
        tag: shallowRef(DragFormItem),
        transfer: shallowRef(DragFormItem),
        tree: shallowRef(DragFormItem),
        colorPicker: shallowRef(DragFormItem)
      }
    }
  },
  watch: {
    selectId(val) {
      if (this.dragTool) {
        this.dragTool.toggleVisible(this.selectId == this.id)
      }
    },
    extendAttrs: {
      handler: function (val, oldVal) {
        this.$nextTick(() => {
          const clickArea = this.initClickArea()
          if (this.dragTool) {
            this.dragTool.changeClickArea(clickArea)
          }
        })
      },
      deep: true
    },
    type: {
      handler: function (val, oldVal) {
        this.$nextTick(() => {
          const clickArea = this.initClickArea()
          if (this.dragTool) {
            this.dragTool.changeClickArea(clickArea)
          }
        })
      },
      deep: true
    }
  },
  mounted() {
    const clickArea = this.initClickArea()
    const dragTool = h(DragTool, { clickArea: clickArea })
    render(dragTool, this.$refs.item.$el)
    this.dragTool = dragTool.component.proxy
    this.dragTool.addHooks({
      remove: () => {
        this.$emit('remove', this.id)
      },
      select: () => {
        this.$emit('select', this.id)
      }
    })
  },
  methods: {
    initClickArea() {
      const clickArea = {
        left: '0px',
        right: '0px',
        bottom: '0px',
        top: '0px'
      }
      if (this.type == 'card') {
        let parentRect = this.$refs.item.$el.getBoundingClientRect()
        let titleRect = this.$refs.item.$el
          .querySelectorAll('.ant-card-head')[0]
          .getBoundingClientRect()
        clickArea.left = titleRect.left - parentRect.left + 'px'
        clickArea.top = titleRect.top - parentRect.top + 'px'
        delete clickArea.bottom
        delete clickArea.right
        clickArea.width = titleRect.right - titleRect.left + 'px'
        clickArea.height = titleRect.bottom - titleRect.top + 'px'
      } else if (this.type == 'tab') {
        let parentRect = this.$refs.item.$el.getBoundingClientRect()
        let titleRect = this.$refs.item.$el
          .querySelectorAll('.ant-tabs-nav')[0]
          .getBoundingClientRect()
        clickArea.left = titleRect.left - parentRect.left + 'px'
        clickArea.top = titleRect.top - parentRect.top + 'px'
        delete clickArea.bottom
        delete clickArea.right
        clickArea.width = titleRect.right - titleRect.left + 'px'
        clickArea.height = titleRect.bottom - titleRect.top + 'px'
      }
      return clickArea
    },
    findItemById(id) {
      return this.$refs.item.findItemById(id)
    },
    findItemByKey(key) {
      return this.$refs.item.findItemByKey(key)
    },
    removeItemById(id) {
      return this.$refs.item.removeItemById(id)
    },
    findKeyedItems(array) {
      this.$refs.item.findKeyedItems(array)
    },
    buildHtml(disable, space, filter,modelName) {
      return this.$refs.item.buildHtml(disable, space, filter,modelName)
    },
    getData(array, filter) {
      this.$refs.item.getData(array, filter)
    },
    findQueryableItemHtml(obj, space) {
      return this.$refs.item.findQueryableItemHtml(obj, space)
    }
  }
}
</script>
